import React, { useRef } from 'react'
import PropTypes from 'prop-types'
import { Modal, Form, Checkbox, Alert } from 'antd'
import style from './DocSelectModal.module.less'
const { Item } = Form

// 格式化文书列表
function formatOptions (list) {
  return list.map(li => {
    return {
      label: li.title,
      value: li.key,
      disabled: li.value === li.key && li.value
    }
  })
}

// 获取默认数据
function getDefaultValue (list) {
  const result = []
  list.forEach(li => {
    result.push(li.key) // 默认选中全部
  })
  return result
}

// 渲染操作提示
function renderNotice (action) {
  if (!action || !action.alertmsg) {
    return null
  }
  return (
    <div className={style['notice-block']}>
      <Alert message={action.alertmsg} type='warning' showIcon />
      {action.employees ? <div className={style['operate-line']}>下一步操作者：{action.employees}</div> : null}
    </div>
  )
}

function DocSelectModal ({ visible, onHide, list, onFinish, action }) {
  const options = formatOptions(list)
  const formRef = useRef(null)
  return (
    <Modal
      title='选择文书'
      width='800px'
      open={visible}
      onCancel={onHide}
      onOk={() => formRef.current && formRef.current.submit()}
      destroyOnClose
      maskClosable
    >
      <div>
        {renderNotice(action)}
        <Form ref={formRef} initialValues={{ docList: getDefaultValue(list) }} onFinish={d => onFinish(d.docList)}>
          <Item label='文书列表' name='docList'>
            <Checkbox.Group options={options} />
          </Item>
        </Form>
      </div>
    </Modal>
  )
}

DocSelectModal.proptypes = {
  visible: PropTypes.bool,
  onHide: PropTypes.func,
  onFinish: PropTypes.func,
  list: PropTypes.array,
  action: PropTypes.object
}

DocSelectModal.defaultProps = {
  visible: false,
  onHide: () => {},
  onFinish: () => {},
  list: [],
  action: null
}

export default DocSelectModal
